<template>
  <div>
    <Header :title="headerTitle"></Header>
    <div class="cart_item_body">
      <!-- 购物车商品列表 -->
      <van-row v-for="(item,index) in cart" :key="index" style="margin: 10px 0px;">
        <!-- 复选框 -->
        <van-col span="2" style="display: flex;justify-content: center;margin-top: 10px;">
          <input type="checkbox" :checked="item.checked" />
        </van-col>

        <!-- 商品卡片 -->
        <van-col span="21">
          <van-card :price="item.originalPrice" :title="item.title" :thumb="item.mainPic">
            <template #num>
              <van-stepper v-model="item.num" integer />
            </template>
          </van-card>
        </van-col>

        <!-- 删除按钮 -->
        <van-col span="1" style="display: flex;justify-content: center;margin-top: 10px;">
          <van-icon name="delete" color="red" />
        </van-col>
      </van-row>

      <!-- 底部提交订单区域 -->
      <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
        <input type="checkbox" :checked="allChecked" />全选
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  data() {
    return {
      allPrice: 0,
      allChecked: false
    };
  },
  components: {
    Header
  },
  computed: {
    cart: function() {
      return this.$store.state.cart;
    },
    headerTitle() {
      return `购物车(${this.cart.length})`;
    }
  },
  methods: {
    onSubmit() {
      //提交按钮
      console.log("提交事件触发！");
    }
  }
};
</script>

<style>
.cart_item_body {
  margin-top: 40px;
}
</style>